<template>
  <div>
    <basic-dialog
      :visible.sync="dialogVisible"
      :handleClose="handleCloseDialog"
      :handleOpened="handleOpenedDialog"
      :title="title"
      :show-footer="false"
      :width="'40%'"
    >
      <div class="form-container">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cityOptions" :label="city.areaCode" :key="city.areaCode">{{city.areaName}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <el-row type="flex" justify="end">
        <el-button @click="handleCloseDialog">取消</el-button>
        <el-button type="primary" :disabled="this.checkedCities.length == 0" :loading="submitLoading" @click="handleSubmit">确定</el-button>
      </el-row>
    </basic-dialog>
  </div>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';

export default {
  name: 'SalesAreaDialog', // 销售区域
  components: {
    BasicDialog,
  },
  props: {
    visible: { type: Boolean, default: false },
    title: { type: String, default: '选择销售区域' },
    cityList: { type: Array, default: () => [] },
    selectCitys: { type: Array, default: () => [] },
    beforeSelect: { // 选择区域前触发，默认无此方法
      type: Function
    }
  },
  data () {
    return {
      loading: false,
      submitLoading: false,
      cityOptions: [],
      checkAll: false,
      checkedCities: [],
      isIndeterminate: true
    };
  },
  computed: {
    dialogVisible () {
      return this.visible;
    },
  },
  watch: {
    cityList: {
      handler (newVal) {
        this.cityOptions = newVal
      },
      // immediate: true
    },
    /* selectCitys: {
      handler (newVal, oldVal) {
        console.log(newVal)
        this.checkedCities = newVal
      },
      immediate: true,
      deep: true
    }, */
  },
  methods: {
    handleOpenedDialog () {
      this.checkedCities = this.selectCitys;
    },
    handleCheckAllChange (val) {
      this.checkedCities = val ? this.cityOptions.map(item => item.areaCode) : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cityOptions.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cityOptions.length;
    },
    handleCloseDialog () {
      this.checkedCities = [];
      this.$emit('update:visible', false);
    },
    // 提交
    handleSubmit () {
      const onSuccess = () => {
        this.$emit('getSaleAreas', this.checkedCities.sort())
        this.handleCloseDialog()
      }
      this.beforeSelect ? this.beforeSelect(onSuccess, this.checkedCities.sort()) : onSuccess()
    },
  }
};
</script>
<style lang="less" scoped>
.form-container {
  margin-bottom: 10px;
}
.title {
  margin-top: 25px;
}
.tag-list {
  margin-top: 10px;
  .el-tag {
    margin-right: 10px;
  }
}
</style>
